<template>
    <view class="content">
        <view class="nav2">
            <view class="nav2-r">
                <view>费用项目</view>
                <view class="time" @click="show_1 = true">
                    <view>{{cost || '请选择'}}</view>
                    <u-icon name="arrow-down-fill" color="#575757" size="18" class="u-m-l-10"></u-icon>
                </view>
            </view>
            <view class="nav2-r">
                <view>日期检索</view>
                <view class="time" @click="show = true">
                    <view>{{date || '请选择'}}</view>
                    <image src="../../static/icon/time.png" class="time-icon"></image>
                </view>
            </view>
        </view>
		
		<view class="send" v-for="(item, index) in list" :key="index" @click="choose(item)">
		    <view>
		        <view class="send-i">
		            <view class="send-l">车牌号</view>
		            <view class="u-flex-1">{{item.number}}</view>
		        </view>
		        <view class="send-i">
		            <view class="send-l">发货日期</view>
		            <view class="u-flex-1">{{item.start_date}}</view>
		        </view>
				<view class="send-i" v-if="item.out_trade_no">
				    <view class="send-l">运单号</view>
				    <view class="u-flex-1">{{item.out_trade_no}}</view>
				</view>
		        <view class="send-i" v-for="(el, ind) in item.cost_items" :key="ind">
		            <view class="send-l">{{el.item}}</view>
		            <view class="u-flex-1">{{el.items}} {{el.cost}}元 {{el.num}}{{el.unit}}</view>
		        </view>
		        <view class="send-i">
		            <view class="send-l">录入日期</view>
		            <view class="u-flex-1">{{item.create_time}}</view>
		        </view>
		    </view>
			
			<image :src="item.isSelect ? '../../static/icon/choose.png' : '../../static/icon/choose_02.png'" class="choose"></image>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
		
		<view class="footer">
		    <view></view>
		    <view class="btn" @click="$noMultipleClicks(doSubmit)">确认选择</view>
		</view>
		
		<!-- 日期检索 -->
		<u-picker mode="time" v-model="show" @confirm="confirm"></u-picker>
		<!-- 费用项目 -->
		<template v-if="show_1">
			<u-select v-model="show_1" mode="mutil-column-auto" :list="costList" 
				value-name="id" label-name="name" child-name="items" @confirm="confirmCost"></u-select>
		</template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
                show: false,
                date: '',
				show_1: false,
				costList: '',
				cost: '',
				costId: '',
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
            };
        },
        onLoad() {
            this.getList()
			this.getCost()
        },
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
			// 确认选择
			doSubmit() {
				let arr = []
				if (this.list.length > 0) {
				    this.list.forEach(cur => {
				        if (cur.isSelect) {
				            arr.push(cur)
				        }
				    })
				}
				if (arr.length > 0) {
				    uni.$emit('CHOOSE_COST_LIST', {arr:arr})
				} 
				this.$backT()
			},
			
			choose(item) {
				item.isSelect =! item.isSelect
			},
			
			confirmCost(e) {
				console.log(e)
				this.cost = e[1].label
				this.costId = e[1].value
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			},
			
			// 获取费用项
			getCost() {
				this.$ajax('cost_items', {
					user_token: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.success == 1000) {
						this.costList = ret.detail&&ret.detail.cost_items
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
            confirm(e) {
            	console.log(e)
            	this.date = e.year + '-' + e.month + '-' + e.day
            	this.list = []
            	this.page = 1
            	this.status = 'loadmore'
            	this.getList()
            },
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('cost_doc', {
					user_token: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
			        date: this.date,//日期搜索 费用单/可添加结算费用单
					type: 1,//1 可添加结算费用单
					items_id: this.costId,//搜索项目id 可添加结算费用单
					settlement_id: '',//结算单id 结算单详情
				}).then(ret => {
					if (ret.success == 1000) {
						if (ret.detail && ret.detail.cost_doc && ret.detail.cost_doc.length > 0) {
							this.list = this.list.concat(ret.detail.cost_doc);
							this.page++;
							this.status = 'loadmore'
							
							this.list.forEach(cur => {
								this.$set(cur, 'isSelect', false)
							})
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
	
    page{
        background-color: #eef1f6;
    }
    .content{
        padding: 20rpx 20rpx 100px;
    }
    
    .nav2{
        padding-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav2-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #737373;
    }
    .time{
        width: 230rpx;
        height: 64rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
        margin-left: 12rpx;
        padding: 15rpx;
        background-color: #fff;
        border-radius: 10rpx;
    }
    .time-icon{
        width: 25rpx;
        height: 25rpx;
        margin-left: 20rpx;
    }
	
	.send{
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	    padding: 30rpx 25rpx;
	    background-color: #f5f7fa;
	    border-radius: 15rpx;
	    margin-top: 15rpx;
	}
	.send-i{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 28rpx;
	    color: #3a4a6e;
	}
	.send-l{
	    width: 180rpx;
		word-break: break-all;
		white-space: pre-line;
		padding-right: 15rpx;
		padding-bottom: 10rpx;
	}
	.choose{
	    width: 31rpx;
	    height: 31rpx;
	    margin-left: 10rpx;
	}
	.footer{
	    width: 100%;
	    height: 110rpx;
	    background-color: #fff;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 20rpx;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	}
	.btn{
	    color: #fff;
	    padding: 18rpx 60rpx;
	    background-color: #00457f;
	    border-radius: 50rpx;
	}

</style>
